<template>
  <el-dialog title="试题预览" :visible="showDialog" @close="btnCancel">
    <!-- 页面内容 -->
   <!-- 预览页面内容 -->
              <el-row  type="flex" >
               <el-col>
                  <span v-if="list.questionType==='1'">【题型】:单选</span>
                  <span v-else-if="list.questionType==='2'">【题型】:多选</span>
                  <span v-else>【题型】:简答</span>
               </el-col>
               <el-col>【编号】：{{list.id}}</el-col>
               <el-col>
                  <span v-if="list.difficulty==='1'">【难度】:简单</span>
                  <span v-else-if="list.difficulty==='2'">【难度】:一般</span>
                  <span v-else>【难度】:困难</span>
               </el-col>
               <el-col>【标签】：{{list.tags}}</el-col>
              </el-row>
              <el-row  type="flex"  class="row-two">
               <el-col :span="6">【学科】:{{list.subjectName}}</el-col>
               <el-col  :span="6">【目录】：{{list.catalogID}}</el-col>
               <el-col  :span="6">【方向】：{{list.direction}}</el-col>
              </el-row>
              <el-row class="line">【题干】：
                <el-row style="margin:15px">
                  <span v-html="list.question" style="color:blue"></span>
                </el-row>
                 <el-row style="margin:15px">
                  <el-col v-for="(item,index) in list.options" :key="index">
                   <!-- 多选选项 -->
                    <template v-if="list.questionType==='2'">
                        <el-checkbox :checked="true?item.isRight===1:item.isRight===0">{{item.title}}</el-checkbox>
                    </template>
                  <!-- 单选选项 -->
                    <template v-else-if="list.questionType==='1'">
                        <el-radio v-model="radio" :label="item.isRight!==1">{{item.title}}</el-radio>
                    </template>
                   <!-- 简答 -->
                    <span v-else></span>
                  </el-col>
                </el-row>
              </el-row>
              <el-row class="line">【参考答案】：
                <el-button type="danger" size="mini" @click="clickVideo">视频答案预览</el-button>
                  <video :src="list.videoURL" id="video" style="display:none" controls autoplay></video>
                </el-row>
              <el-row class="line">
                <span>【答案解析】：</span>
                <span v-html="list.answer"></span>
              </el-row>
              <el-row style="padding-top:10px">【题目备注】：{{list.remarks}}</el-row>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="small" @click="btnCancel">关闭</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>

export default {
  data () {
    return {
      checked: false,
      radio: false
    }
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    list: {
      type: Object,
      require: true
    }
  },
  methods: {
    btnCancel () {
      this.$emit('update:showDialog', false) // 关闭
    },
    // 点击视频答案解析按钮  显示解析视频
    clickVideo () {
      document.getElementById('video').style.display = 'block'
    }
  }
}
</script>

<style>

</style>
